<script setup lang="ts">
    import { reactive, ref, onMounted, watch } from 'vue'//引入vue函数
    import type { FormInstance } from 'element-plus' //导入表单实例类型
    import { addUser, updateUser } from '@/api' //数据接口
    import { ElMessage } from 'element-plus' //导入消息框

    //获得当前组件属性
    const props = defineProps(["isShow", "user"])

    //自定义事件
    const emit = defineEmits(["closeDialog"])

    //定义表单数据对象
    const formObj = reactive({
        username:"",
        password:"",
    });

    //定义表单对象实例的引用
    const formRef = ref<FormInstance>()

    //定义表单验证规则
    const rules = reactive({
        username:[
            { required:true, message:"用户名称不能为空", trigger:"blur"}
        ],
        password:[
            { required:true, message:"用户密码不能为空", trigger:"blur"}
        ]
    })

    //表单提交，添加或修改用户
    async function submitForm(){
        await formRef.value?.validate(async (valid, _fields)=>{
            if(valid){
                var res = null
                if(props.user.id == 0){
                    //添加用户
                    const data = {
                        username:formObj.username,
                        password:formObj.password,
                        salt:"",
                        avatar:"",
                        state:false
                    }
                    res = await addUser(data)
                }
                else{
                    //修改用户
                    const data = {
                        id:props.user.id,
                        username:formObj.username,
                        password:formObj.password,
                        salt:props.user.salt,
                        avatar:props.user.avatar,
                        state:props.user.state
                    }
                    res = await updateUser(data)
                }
                
                if(res.data.errno == 0){
                    //发送自定义事件
                    emit("closeDialog")
                    //添加或修改成功
                    ElMessage.success(res.data.errmsg)
                }
                else{
                    //添加或修改失败
                    ElMessage.error(res.data.errmsg)
                }
            }
        })
    }

    //初始化表单
    function initForm(){
        if(props.user.id != 0){
            formObj.username = props.user.username
            formObj.password = ""
        }
        else{
            formObj.username = ""
            formObj.password = ""
        }
    }

    //监听当前组件属性是否发生变化
    watch(props,()=>{
        initForm()
    })

    //组件加载完成
    onMounted(()=>{
        initForm()
    })
</script>

<template>
    <el-form ref="formRef" :model="formObj" :rules="rules" label-width="120" status-icon>
        <el-form-item label="用户名称" prop="username">
            <el-input v-model="formObj.username" style="width:400px;" placeholder="请填写用户名称"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
            <el-input v-model="formObj.password" style="width:400px;" placeholder="请填写用户密码" type="password"></el-input>
        </el-form-item>
        <el-form-item label="">
            <el-button type="primary" @click="submitForm">{{ props.user.id==0?"新增":"修改" }}</el-button>
            <el-button @click="initForm">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<style scoped></style>